<script setup>
import { ref } from 'vue'

const active1 = ref(false)
const finish1 = ref(false)
</script>

<template>
    <div class="progress-wrapper">
        <div class="css-progress" :class="{ active: active1, finish: finish1 }"></div>
        <div style="margin-top: 5px;">
            <el-button @click="active1 = true">点击展示进度</el-button>
            <el-button @click="finish1 = true">点击完成进度</el-button>
            <el-button @click="active1 = false; finish1 = false;">点击重置进度</el-button>
        </div>
    </div>
</template>

<style scoped>
.progress-wrapper {
    padding: 10px;
    height: 100%;
    overflow: auto;
}

@property --percent { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

.css-progress {
    position: relative;
    width: 300px;
    height: 20px;
    background-color: #f0f0f0;
}

.css-progress::before {
    --percent: 0;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(300px * var(--percent) / 100);
    text-align: right;
    color: #fff;
    background: rgb(50, 154, 252);
}

.css-progress.active::before {
    --percent: 99;
    transition: 100s --percent cubic-bezier(.08, .81, .29, .99);
}

.css-progress.finish::before {
    --percent: 100;
    transition: none;
}
</style>